<template>
  <div>
    <course-header :active="active"></course-header>
    <first-cmp :ruleForm="course" ref="firstCmp" @sendParamsFirst="getParamsFirst" v-if="showFirst"></first-cmp>
    <second-cmp :ruleForm="course" ref="secondCmp" v-else-if="showSecond" @sendParamsSecond="getParamsSecond"></second-cmp>
    <third-cmp :ruleForm="course" @sendParamsThird="getParamsThird" ref="thirdCmp" v-else></third-cmp>
    <el-button @click="next" class="next" ref="elBotton">{{buttoninfo}}</el-button>
  </div>
</template>
<script>
import FirstCmp from '@/views/course/editcourse/first-cmp'
import SecondCmp from '@/views/course/editcourse/second-cmp'
import ThirdCmp from '@/views/course/editcourse/third-cmp'
import CourseHeader from "@/views/course/courseheader";
import {getCourse, addCourseList} from '@/api/operation'
import {ERR_OK} from '@/api/config'
export default {
  name: 'EditCourse',
  data() {
    return{
      id: '',
      course: {},
      buttoninfo: "下一步",
      active: 0,
      paramsFirst: {},
      paramsSecond: {},
      paramsThird: {},
      paramsAll: {},
      showFirst: true,
      showSecond: false,
    }
  },
  methods: {
    getParamsThird(params) {
      this.paramsThird = params
    },
    getParamsSecond(params){
      this.paramsSecond = params
    },
    getParamsFirst(params) {
      this.paramsFirst = params
    },
    next() {
      if (this.active++ > 2) {
        // this.$router.push({ path: "/course/courselist" })
        Object.assign(this.paramsAll, this.paramsFirst, this.paramsSecond, this.paramsThird, {id: this.id})
        this._addCourseList(this.paramsAll)
        // console.log(this.paramsAll)
        this.$router.push({path: '/course/courselist'})
      }
      if (this.active === 1) {
        // this.active === 0
        this.showFirst = false;
        this.showSecond = true;
        this.$refs.firstCmp.setContent()
      }
      if (this.active === 2) {
        this.showFirst = false;
        this.showSecond = false;
        this.$refs.secondCmp.formatParams()
      }
      if (this.active === 3) {
        this.buttoninfo = "提交";
        this.$refs.thirdCmp.formatParams()
      }
    },
    _addCourseList(paramsAll) {
      addCourseList(paramsAll)
        .then((res) => {
          if (res.code == ERR_OK) {
            console.log(res)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    _getCourse(id) {
      getCourse(id)
        .then((res) => {
          if (res.code == ERR_OK) {
            console.log(res)
            this.course = res.data.course
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  },
  components: {
    FirstCmp,
    CourseHeader,
    SecondCmp,
    ThirdCmp
  },
  created() {
    this.id = this.$route.params.id
    this._getCourse(this.id)
  }
}
</script>
<style lang="scss" scoped>
.next {
  width: 70px;
  height: 34px;
  line-height: 30px;
  border-radius: 6px;
  background-color: rgba(27, 166, 135, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  color: #fff;
  padding: 0;
  position: absolute;
  right: 50px;
  bottom: 50px;
}
</style>